<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" href="../css/commin.css">
    <link rel="stylesheet" href="../icon/iconfont.css">

</head>

<body>
    <div id="login">

        <!-- 头部 -->
        <header>
            <div class="shop" id="shop">
                <a href="./index.html"><i class="iconfont icon-xiangzuojiantou"></i></a>
                <div class="page">
                    <h3>会员登录</h3>
                </div>
            </div>
        </header>


        <div class="uni-wrapper">
            <div class="container">
                <div class="number-header">
                    <div class="title">手机号登录</div>
                    <div class="sub-title">未注册的手机号登录后将自动注册</div>
                </div>
                <form>
                    <div class="login-form">
                        <div class="form-item">
                            <div class="text" id="txt"><input type="text" name="phone" placeholder="请输入手机号码"
                                    v-model="number"></div>
                        </div>
                        <div class="form-item">
                            <div class="form-input"><input type="text" placeholder="请输入图形验证码" name="picture"
                                    v-model="picture"></div>
                            <div class="form-parts">
                                <div class="pic">
                                    <img :src="img" alt="" class="toggle" @click="this.getPicture">
                                </div>
                            </div>
                        </div>
                        <div class="form-item">
                            <div class="uni-input-message"><input type="text" placeholder="请输入短信验证码" name="msg"
                                    v-model="msg"></div>
                            <div class="form-item-parts active" id="getCode" @click="getMsg">获取验证码</div>
                        </div>
                        <div class="login-button" @click="getLogin"><span>登录</span></div>
                    </div>
                </form>
            </div>
        </div>
    </div>



    <script src="../js/axios.js"></script>
    <script src="../js/commin.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/login.js"></script>
    <script>
        // 接口调用基础地址：http://cba.itlike.com/public/index.php?s=/api/
        axios.defaults.baseURL = 'http://cba.itlike.com/public/index.php?s=/api/';
        const login = new Vue({
            el: '#login',
            data: {
                img: '',
                number: '',
                picture: '',
                msg: '',
                key: ''
            },
            created() {
                this.getPicture()
            },
            methods: {
                async getPicture() {
                    const { data: data } = await axios.get('/captcha/image')
                    console.log(data.data.key)
                    // console.log(data.data.base64)
                    // console.log(data)
                    this.img = data.data.base64
                    this.key = data.data.key
                },
                async getMsg() {
                    // console.log(5)
                    const { data } = await axios.post('/captcha/sendSmsCaptcha', {
                        form: {
                            captchaCode: this.picture,
                            captchaKey: this.key,
                            mobile: this.number
                        }
                    })
                    console.log(data)
                },
                async getLogin() {
                    console.log(5)
                    const data = await axios.post('/passport/login', {
                        form: {
                            "smsCode": this.msg,
                            "mobile": this.number,
                            "isParty": false,
                            "partyData": {}
                        },
                    },
                        {
                            headers: {
                                platform: 'H5'
                            }
                        })
                    console.log(data)
                    // console.log(res)
                    // console.log(res)
                    console.log(data.data)
                    console.log(data.data.data.token)
                    // console.log(res.data.userId)
                    // console.log(res.data.token)
                    localStorage.setItem('user-token',data.data.data.token)
                    // localStorage.setItem('userId', res.data.userId)
                },
            }
        })
    </script>
</body>

</html>